<template>
  <div class="info-panel">
    <div class="info-panel__body">
      <CommonTitle :title="title" />
      <div class="content-box">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.info-panel {
  position: relative;
  height: 303px;
  border: 1px solid rgba(82, 209, 255, 0.25);
  margin-top: 20px;
  background:
    // left top
    linear-gradient(to right, #50d1ff, #50d1ff) no-repeat left top / 8px 2px,
    linear-gradient(to bottom, #50d1ff, #50d1ff) no-repeat left top / 2px 8px,
    // right top
    linear-gradient(to left, #50d1ff, #50d1ff) no-repeat right top / 8px 2px,
    linear-gradient(to bottom, #50d1ff, #50d1ff) no-repeat right top / 2px 8px,
    // left bottom
    linear-gradient(to right, #50d1ff, #50d1ff) no-repeat left bottom / 8px 2px,
    linear-gradient(to top, #50d1ff, #50d1ff) no-repeat left bottom / 2px 8px,
    // right bottom
    linear-gradient(to left, #50d1ff, #50d1ff) no-repeat right bottom / 8px 2px,
    linear-gradient(to top, #50d1ff, #50d1ff) no-repeat right bottom / 2px 8px;
  &__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    box-sizing: border-box;
    background-color: rgba(57, 106, 255, 0.12);
    background-clip: content-box;
    /** background-clip: content-box; 是 CSS 的一个属性，用于指定背景的绘制区域。
    在这里，content-box 值表示背景将被绘制在内容框的内边距框内，而不会延伸到边框框或填充框。换句话说，背景将被限制在内容框内部，不会覆盖内边距、边框或外边距。
    这个属性通常用于控制背景的绘制范围，可以根据具体的设计需求来选择不同的值。其他常见的值包括 padding-box（背景绘制在内边距框内）、border-box（背景绘制在边框框内）
    和 inherit（继承父元素的 background-clip 值）。; */
    .common-title {
      margin-top: 10px;
    }
    .content-box {
      flex: 1;
      height: 0px;
      margin-top: 14px;
    }
  }
}
</style>
